<template>
  <div id="app">
    <div class="bill-content" v-for="list in billList">
      <p>2017-05-12 15:30:10</p>
      <div class="bill-box">
        <div class="billtop">
            <div class="userbox">
                <img src="" >
            </div>
            <div class="billtext">
                <h3>{{ list.text }}</h3>
                <h4>金额：<span>￥3999</span></h4>
                <h4>状态：<span style="color:#3cb034">等待开票并邮寄</span></h4>
            </div>
        </div>
        <div class="billbtn">
            <router-link to="/billedit" class="btn">操作</router-link>
        </div>
      </div>
    </div>
  </div> 
</template>

<script>
  export default {
    name: 'billmanage',
    data: function () {
      return {
        billList: [
          { text: '海霸王天地会' },
          { text: '海霸王天地会' },
          { text: '海霸王天地会' }
        ]
      }
    }
  }
</script>

<style scoped>
  .bill-content{
      padding: 0.75rem;
  }
  .bill-content p{
      margin-bottom: 0.5rem;
      text-align: center;
      color:#999;
  }
  .bill-box{
      border:1px solid #ddd;
      background: #fff;
      border-radius:6px;
  }
  .billtop{
      padding: 1rem 0.75rem;
      display: flex;
  }
  .userbox{
      width:50px;
      height: 50px;
      border-radius:100%;
  }
  .userbox img {
      width:50px;
      height: 50px;
      border-radius:100%;
  }
  .billtext{
      margin-left: 0.75rem;
  }
  .billtext h3{
      margin-bottom: 0.5rem;
  }
  .billbtn{
      padding:1rem 0;
      text-align: center;
      border-top: 1px solid #ddd;
  }
  .billbtn .btn{
      width: 45%;
      padding:0.4rem 0;
      text-align: center;
      margin:auto;
      border:1px solid #3cb034;
      border-radius:2rem;
      color:#3cb034;
      background: #fff;
      font-size: 0.9rem;
  }
</style>